<template>
  <div>
    <div class="c">
      <div class="top">
        <div class="total">
          <i class="el-icon-user"></i>
          <div class="content">
            <div class="title">注册用户</div>
            <div class="count">
              <span>{{ users_total }}</span>
              人
            </div>
          </div>
        </div>
        <div class="total">
          <i class="el-icon-s-custom"></i>
          <div class="content">
            <div class="title">艺术家</div>
            <div class="count">
              <span>{{ arts_total }}</span>
              人
            </div>
          </div>
        </div>
        <div class="total">
          <i class="el-icon-goods"></i>
          <div class="content">
            <div class="title">艺术品</div>
            <div class="count">
              <span>{{ works_total }}</span>
              件
            </div>
          </div>
        </div>
        <div class="total">
          <i class="el-icon-position"></i>
          <div class="content">
            <div class="title">在线人数</div>
            <div class="count">
              <span>{{ online_total }}</span>
              人
            </div>
          </div>
        </div>
      </div>
      <div class="middle">
        <div ref="user" class="user"></div>
        <div ref="works" class="works"></div>
      </div>
      <el-tabs v-model="activeName" @tab-click="tiggerContent">
        <el-tab-pane label="艺术家前十名" name="art">
          <el-table :data="data" style="width: 100%">
            <el-table-column type="index"></el-table-column>
            <el-table-column label="头像">
              <template slot-scope="scope">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="`/webapi/8080/plat_service/v1/api/art/${scope.row.art_info.data_id}?op=download_file&name=photo`"
                  :fit="'cover'"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="art_info.name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="art_info.association_job" label="职务"></el-table-column>
            <el-table-column prop="art_info.focus_total" label="关注数量"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="作品前十名" name="work">
          <el-table :data="data" style="width: 100%">
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="art_info.name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="art_info.wokrs_total" label="收藏数量"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import statisManage from '@/api/statistics';
  import * as echarts from 'echarts';

  export default {
    data() {
      return {
        data: [],
        activeName: 'art',
        arts_total: 0,
        users_total: 0,
        works_total: 0,
        online_total: 0,
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      async init() {
        await this.getStatis();
        await this.getOnlineStatis();
        await this.getUserStatis();
        await this.getWorksStatis();
        await this.getArtBefore('query_art_before');
      },
      async getStatis() {
        await statisManage.getStatis().then((res) => {
          this.arts_total = res.arts_total;
          this.users_total = res.users_total;
          this.works_total = res.works_total;
        });
      },
      async getUserStatis(agg_type = 'day') {
        await statisManage
          .getStatis({
            op: 'query_user_agg',
            agg_type,
          })
          .then((res) => {
            if (!Array.isArray(res.user_agg)) return;

            let chart = echarts.init(this.$refs.user);
            let option = {
              title: { text: '用户统计' },
              xAxis: {
                type: 'category',
                data: res.user_agg.map((u) => u.create_time),
              },
              yAxis: {
                type: 'value',
              },
              series: [
                {
                  data: res.user_agg.map((u) => u.total_num),
                  type: 'line',
                },
              ],
              toolbox: {
                itemSize: 30,
                feature: {
                  myYear: {
                    show: true,
                    title: '按年查询',
                    icon: 'image://',
                    onclick: () => {
                      chart.dispose();
                      this.getUserStatis('year');
                    },
                  },
                  myMonth: {
                    show: true,
                    title: '按月查询',
                    icon: 'image://',
                    onclick: () => {
                      chart.dispose();
                      this.getUserStatis('month');
                    },
                  },
                  myDay: {
                    show: true,
                    title: '按日查询',
                    icon: 'image://',
                    onclick: () => {
                      chart.dispose();
                      this.getUserStatis('day');
                    },
                  },
                },
              },
              tooltip: {
                trigger: 'item',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6a7985',
                  },
                },
              },
            };

            option && chart.setOption(option);
          });
      },
      async getWorksStatis(agg_type = 'day') {
        await statisManage
          .getStatis({
            op: 'query_work_agg',
            agg_type,
          })
          .then((res) => {
            if (!Array.isArray(res.work_agg)) return;

            let chart = echarts.init(this.$refs.works);
            let option = {
              title: { text: '作品统计' },
              xAxis: {
                type: 'category',
                data: res.work_agg.map((u) => (agg_type != 'type' && agg_type != 'art' ? u.create_time : u.type_name)),
              },
              yAxis: {
                type: 'value',
              },
              series: [
                {
                  data: res.work_agg.map((u) => (agg_type != 'type' && agg_type != 'art' ? u.total_num : u.total)),
                  type: 'line',
                },
              ],
              toolbox: {
                itemSize: 30,
                feature: {
                  myYear: {
                    show: true,
                    title: '按年查询',
                    icon: 'image://',
                    onclick: () => {
                      chart.dispose();
                      this.getWorksStatis('year');
                    },
                  },
                  myMonth: {
                    show: true,
                    title: '按月查询',
                    icon: 'image://',
                    onclick: () => {
                      chart.dispose();
                      this.getWorksStatis('month');
                    },
                  },
                  myDay: {
                    show: true,
                    title: '按日查询',
                    icon: 'image://',
                    onclick: () => {
                      chart.dispose();
                      this.getWorksStatis('day');
                    },
                  },
                  myType: {
                    show: true,
                    title: '按类型查询',
                    icon: 'image://',
                    onclick: () => {
                      chart.dispose();
                      this.getWorksStatis('type');
                    },
                  },
                  myArt: {
                    show: true,
                    title: '按艺术家查询',
                    icon: 'image://',
                    onclick: () => {
                      chart.dispose();
                      this.getWorksStatis('art');
                    },
                  },
                },
              },
              tooltip: {
                trigger: 'item',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6a7985',
                  },
                },
              },
            };

            option && chart.setOption(option);
          });
      },
      async getOnlineStatis() {
        await statisManage
          .getStatis({
            op: 'query_online_total',
          })
          .then((res) => {
            this.online_total = res;
          });
      },
      async getArtBefore(op) {
        await statisManage.getStatis({ op }).then((res) => {
          if (!Array.isArray(res.art_list)) return;
          this.data = res.art_list;
        });
      },
      tiggerContent() {
        this.getArtBefore(this.activeName == 'art' ? 'query_art_before' : 'query_work_before');
      },
    },
  };
</script>

<style lang="less" scoped>
  .c {
    margin: 0 auto;
    width: 90%;
    .top {
      margin: 0 auto;
      height: 140px;
      display: flex;
      justify-content: space-between;
      .total {
        padding: 20px;
        background-color: white;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        > * {
          float: left;
          height: 100px;
        }
        i {
          font-size: 40px;
          width: 80px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-right: 1px solid #ccc;
        }
        .content {
          min-width: 120px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .title {
            color: #797979;
          }
          .count {
            margin-top: 10px;
            span {
              font-size: 28px;
            }
          }
        }
      }
    }
    .middle {
      margin-top: 40px;
      &,
      > * {
        height: 400px;
      }
      > * {
        width: 50%;
        float: left;
      }
    }
  }
</style>
